<template>
  <div>
    <div class="title">
      <image src="/static/search.svg" class="search" mode="widthFix"/>
      <image src="/static/furhter_logo.svg" class="logo" mode="widthFix"/>
    </div>

    <view class="page">

      <view class="card">
        <image src="/static/furhter_logo.svg" class="card_tlogo" mode="widthFix"/>
        <image src="/static/timg.jpg" class="card_topimg" mode="widthFix"/>
        <div class="card_title"><span>我正在读这篇文章</span><i></i></div>
        <div class="card_n">李兰迪：演员未满<span><em>05</em>Oct.2018</span></div>
        <div class="card_hr"></div>
        <div class="card_text">穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三的学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</div>
        <div class="card_hr2"></div>
        <div class="card_logo"><image src="/static/Rectangle 7.jpg" class="card_topimg" mode="widthFix"/><span>长按小程序码<br/>进入 Further 阅读全文</span></div>
      </view>

    </view>

  </div>
</template>

<script>
export default {
  data () {
  },
  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.search{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.top{width: 100%; height: auto; display: block; float: left; margin:80px 0 10px; font-size: 30px; color: #000000; text-align: center;}
.top span{width: 100%; height: auto; display: block; float: left;margin: 0 0 15px;font-family: Source Han Serif SC; }
.top i{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 0 175.5px 18px}
.top p{width: 240px; height: auto; display: block; float: left;  line-height: 22px; color: rgba(0,0,0,.4); font-size: 14px;font-family: PingFang SC;margin: 0 67.5px 0px }

.page {height: 100%;width: 100%;float: left;margin: 64px 0 0 0;}

.card{height: auto;width: 88%;background-color: #ffffff;padding:10px 6%;}
.card_tlogo{ width: 108px;height:auto; display: block; float:left;margin:6px 109px 16px; }
.card_topimg{ width: 100%; height: auto; display: block; float:left;}
.card_title{width: 100%;height:20px; display: block; float:left;margin:15px 0px 15px; position:relative; }
.card_title span{width: auto;height:20px; display: block; float:left;font-size: 12px; line-height: 24px; background: #ffffff; padding: 0 5px 0 0; color: rgba(0,0,0,.4);  position:absolute; z-index: 2; top: 0px;left: 0px}
.card_title i{width: 100%;height:1px; display: block; float:left; border-bottom: 1px solid rgba(0, 0, 0, 0.4); position:absolute;top: 10px;left: 0; z-index: 1;}
.card_n{ width: 100%; height: auto; display: block; float: left; margin: 0; font-size: 30px; line-height: 34px;color: #000000;}
.card_n span{ width: 60px; height: auto; display: block; float: right; margin: 0; font-size: 10px; line-height: 27px;color:rgba(0,0,0,.6); text-align: right;}
.card_n span em{width: 100%; height: auto; display: block; float: left;font-size: 18px;}
.card_hr{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 5px 0;}
.card_text{width:100%; height: auto; display: block; float: left; margin: 15px 0 0 ; font-size: 14px; line-height: 22px;color:rgba(0,0,0,.4);}
.card_hr2{width: 53px; height:1px; display: block; float: left; background: #C4C4C4; margin: 20px 0 10px;}
.card_logo{ width: 100%; height: 48px; display: block; float: left; margin: 26px  0; font-size: 10px; line-height:15px;color: rgba(0,0,0,.4);}
.card_logo image{width: 48px; height: 48px; display: block; float: left;margin:0 10px 0 0;}
.card_logo span{width: auto; height: auto; display: block; float: left; margin:7px 0px 0 0;}
</style>